//导入path模块 用来处理路径
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//导出一个webpack的配置对象
module.exports = {
    //配置打包的入口文件，webpack会从此文件开始打包项目
    entry:'./src/index.js',
    devtool:'source-map',
    //配置webpack如何输出结果
    output:{
        //指定输出的文件夹
        path:path.join(__dirname,'dist'),//连接当前文件所在的目录和dist目录
        //指定输出的文件名
        filename:'main.js'
    },
    module:{
        rules:[
            {
                test:/\.js$/,//如果模块文件名是以.js结尾的话
                exclude:/node_modules/,//因为node_modules是别人写的，而且已经处理过了，所以不需要我们编译处理
                use:{//配置使用哪些loader进行转换代码
                    loader:'babel-loader',//使用babel-loader调用babel类进行转译代码
                    options:{
                        presets:[//配置一个预设 可以把React代码，也就是JSX代码转成JS
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    devServer:{
        port:8080,
        open:true
    }
}